<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>扩展字段模板维护界面</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${basepath}/assets/uploadify/uploadify.css">
    <script type="text/javascript" src="${basepath}/assets/uploadify/swfobject.js"></script>
    <script type="text/javascript" src="${basepath}/assets/uploadify/jquery.uploadify.v2.1.0.min.js"></script>
    <style>
    	html, body{ margin:0; height:100%;width: 100%;
            padding: 0; }
    	table{font-size:18px}
    	label{margin:4px}
        a{
            text-decoration:none;
        }
    </style>
    <script>
        var selectedid=undefined;
    $(function(){
    	var datagrid; //定义全局变量datagrid
        var editRow = undefined; //定义全局变量：当前编辑的行
        
        var codedatagrid; //定义全局变量datagrid
        var codeeditRow = undefined; //定义全局变量：当前编辑的行
        
        datagrid = $('#baseType').datagrid({
    		rownumbers:true,
    		singleSelect:true,
    		pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
            method:'get',
    		url:"${path}/cootasktable/tablebase",
    		columns:[[
    			{field:'id', title: '编号', width:0,sortable: true, checkbox: true,fitColumns:true },
    			{field:'name',title:'模板名字',width:'150','sortable':true,fitColumns:true ,editor:{ type: 'validatebox', options: { required: true} }},
    			{field:'tableType',title:'模板类型',width:'130',fitColumns:true ,
    				editor:{ 
    						type: 'combobox',
    						required: true,
    						options:
    						{
    							valueField: 'code',
    							textField: 'name',
    							url: '${path}/common/getBaseCodeList?type=coo_task_table_type'
    						}
    				},
    				formatter: function(value,row,index) {    
    	                 return row['tableTypeName'];  
    	             }			
    				}
    			]],
            toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
                //添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
                if (editRow != undefined) {
                    datagrid.datagrid("endEdit", editRow);
                }
                //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
                if (editRow == undefined) {
                    datagrid.datagrid("insertRow", {
                        index: 0, // index start with 0
                        row: {}
                    });
                    //将新插入的那一行开户编辑状态
                    datagrid.datagrid("beginEdit", 0);
                    //给当前编辑的行赋值
                    editRow = 0;           
                }

            }
            }, '-',
             { text: '删除', iconCls: 'icon-remove', handler: function () { 
            	 //删除时先获取选择行
                 var rows = datagrid.datagrid("getSelections");
                 console.log(rows);
                 //选择要删除的行
                 if (rows.length > 0) {
                     $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                         if (r) {
                             //将选择到的行存入数组并用,分隔转换成字符串，
                             //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id                            
                 			$.ajax({
                   			 	url: "${path}/cootasktable/deltablebase",  //请求的url地址
                   			 	dataType: "json",   //返回格式为json
                   			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
                   			 	data: { "id":rows[0].id},    //参数值
                   			 	type: "post",   //请求方式

                   			 	success: function(req) {
                   			 		if(req.status=='1'){
                   			 			datagrid.datagrid("reload");
                   			 			codedatagrid.datagrid("reload");	
                   			 		}else{
                   			 			$.messager.alert("提示", req.msg,"info"); 
                   			 		}                			 		
                				},
                				complete: function(req) {
					
                				},
                				error:function(req) {
                					console.log(req);
                					$.messager.alert("警告", "删除出错","error"); 
                				}
                			});
         
                         }
                     });
                 }
                 else {
                     $.messager.alert("提示", "请选择要删除的行", "error");
                 }
             }
             }, 
             '-',
             { text: '修改', iconCls: 'icon-edit', handler: function () {
                 //修改时要获取选择到的行
                 var rows = datagrid.datagrid("getSelections");.
                 
                 //如果只选择了一行则可以进行修改，否则不操作
                 if (rows.length == 1) {
                     //修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
                     if (editRow != undefined) {
                         datagrid.datagrid("endEdit", editRow);
                         editRow == undefined;
                     }
                     //当无编辑行时
                     if (editRow == undefined) {
                         //获取到当前选择行的下标
                         var index = datagrid.datagrid("getRowIndex", rows[0]);
                         //开启编辑
                         //datagrid.datagrid("beginEdit", index);
                         //把当前开启编辑的行赋值给全局变量editRow
                         editRow = index;        
                         
                         datagrid.datagrid("beginEdit", editRow);

                         //当开启了当前选择行的编辑状态之后，
                         //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
                         datagrid.datagrid("unselectAll");
                     }
                 }
              }
             }
             ,'-',
             { text: '保存', iconCls: 'icon-save', handler: function () {
                 //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
                 datagrid.datagrid("endEdit", editRow);
             }
             }, '-',
             { text: '取消编辑', iconCls: 'icon-clear', handler: function () {
                 //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
                 editRow = undefined;
                 datagrid.datagrid("rejectChanges");
                 datagrid.datagrid("unselectAll");
             	}
             }
             ],
             
             
            onAfterEdit: function (rowIndex, rowData, changes) {
                //endEdit该方法触发此事件
                editRow = undefined;
                
                if(rowData != null&&!$.isEmptyObject(changes)){
         			$.ajax({
           			 	url: "${path}/cootasktable/tablebase",    //请求的url地址
           			 	dataType: "json",   //返回格式为json
           			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
           			 	data: rowData,//{ "courseTextbook":courseTextbook },    //参数值
           			 	type: "post",   //请求方式
           			 	success: function(req) {
           			 		if(req.status=='1'){
           			 			datagrid.datagrid("reload");	
           			 		}else{
           			 			$.messager.alert("提示", req.msg,"info"); 
           			 		}                			 		
        				},
        				error:function(req) {
        					console.log(req);
        					$.messager.alert("警告", "修改出错","error"); 
        				}
        			})            	
                } 
            },
            onClickRow:function (rowIndex, rowData) {           	
            	selectedid=rowData.id;
             	codedatagrid.datagrid('load',{
             		tablebaseID: rowData.id
            	}); 
            },
            onDblClickRow: function (rowIndex, rowData) {
            //双击开启编辑行h
                if (editRow != undefined) {
                    datagrid.datagrid("endEdit", editRow);
                    editRow=undefined;
                }
                if (editRow == undefined) {
                 	datagrid.datagrid("beginEdit", rowIndex);
                    editRow = rowIndex;  
                }
            }
    	})
  
        var pager = datagrid.datagrid('getPager');

        pager.pagination({
  	               total:2000,
  	               pageSize:10, 	
  	               pageNumber:1,
  	               pageList:[10,20,30],  	               
  	               loading:true,
  	               showPageList:true,
  	               showRefresh:true,
  	               beforePageText:'当前页数',
  	               afterPageText:' 共{pages}页',
  	               displayMsg:'共{total}条记录'
  	    });

        //右list


        codedatagrid = $('#baseTypeCode').datagrid({
            rownumbers:true,
            singleSelect:false,
            pagination:true,
            fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
            method:'get',
            url:"${path}/cootasktable/tablebasedetail",
            columns:[[
                {field:'id', title: '编号', sortable: true, checkbox: true,fitColumns:true },
                {field:'name',title:'名字',width:'18%',fitColumns:true ,editor:{ type: 'validatebox', options: { required: true} }},
                {field:'sort',title:'排序',width:'18%',fitColumns:true ,editor:{ type: 'numberbox',options: { required: true} }},
                {field:'type',title:'类型',width:'18%',fitColumns:true ,
                editor:{
                        type: 'combobox',
                        required: true,
                        options:
                        {
                            valueField: 'code',
                            textField: 'name',
                            url: '${path}/common/getBaseCodeList?type=coo_task_column_type'
                        }
                },
                formatter: function(value,row,index) {
                     return row['typeName'];
                 }
                },
                {field:'itemType',title:'类型',width:'20%',fitColumns:true ,
                editor:{
                        type: 'combobox',
                        required: true,
                        options:
                        {
                            valueField: 'code',
                            textField: 'name',
                            url: '${path}/common/getBaseCodeList?type=coo_task_column_itemtype'
                        }
                },
                formatter: function(value,row,index) {
                     return row['itemTypeName'];
                 }
                },
                {field:'note',title:'备注',width:'18%',fitColumns:true ,editor:{ type: 'validatebox', options: { required: false} }}
            ]],
            /* queryParams: { action: 'query' }, //查询参数 */
            toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
                //添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
                if (editRow != undefined) {
                    codedatagrid.datagrid("endEdit", editRow);
                }
                //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
                if (editRow == undefined) {
                    codedatagrid.datagrid("insertRow", {
                        index: 0, // index start with 0
                        row: {}
                    });
                    //将新插入的那一行开户编辑状态
                    codedatagrid.datagrid("beginEdit", 0);
                    //给当前编辑的行赋值
                    editRow = 0;
                }

            }
            }, '-',
             { text: '删除', iconCls: 'icon-remove', handler: function () {
                 //删除时先获取选择行
                 var rows = codedatagrid.datagrid("getSelections");
                 //console.log(rows);
                 var rowIdsArr = new Array();
                 $.each(rows, function (key, value) {
                     rowIdsArr.push(value.id);
                 });
                 //console.log(rowIdsArr);
                 //选择要删除的行
                 if (rows.length > 0) {
                     $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                         if (r) {
                             //将选择到的行存入数组并用,分隔转换成字符串，
                             //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
                            $.ajax({
                                url: "${path}/cootasktable/deltablebasedetail",    //请求的url地址
                                dataType: "json",   //返回格式为json
                                async: true, //请求是否异步，默认为异步，这也是ajax重要特性
                                data: { "id":rowIdsArr.join(',')},    //参数值
                                type: "post",   //请求方式
                                beforeSend: function() {
                                  //请求前的处理
                                },
                                success: function(req) {
                                    if(req.status=='1'){
                                        layer.msg(req.msg, {time: 3000, icon: 6});
                                        codedatagrid.datagrid("reload");
                                    }else{
                                        $.messager.alert("提示", req.msg,"info");
                                    }
                                },
                                complete: function(req) {

                                },
                                error:function(req) {
                                    console.log(req);
                                    $.messager.alert("警告", "删除出错","error");
                                }
                            });

                         }
                     });
                 }
                 else {
                     $.messager.alert("提示", "请选择要删除的行", "error");
                 }
             }
             },
             '-',
             { text: '修改', iconCls: 'icon-edit', handler: function () {
                 //修改时要获取选择到的行
                 var rows = codedatagrid.datagrid("getSelections");
                 
                 //如果只选择了一行则可以进行修改，否则不操作
                 if (rows.length == 1) {
                     //修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
                     if (codeeditRow != undefined) {
                         codedatagrid.datagrid("endEdit", codeeditRow);
                         codeeditRow == undefined;
                         
                     }
                     //当无编辑行时
                     if (codeeditRow == undefined) {             
                         //获取到当前选择行的下标
                         var index = codedatagrid.datagrid("getRowIndex", rows[0]);
                         //开启编辑
                         //datagrid.datagrid("beginEdit", index);
                         //把当前开启编辑的行赋值给全局变量editRow
                         codeeditRow = index;

                         codedatagrid.datagrid("beginEdit", codeeditRow);

                         //当开启了当前选择行的编辑状态之后，
                         //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
                         codedatagrid.datagrid("unselectAll");
                     }
                 }
              }
             }
             ,'-',
             { text: '保存', iconCls: 'icon-save', handler: function () {
                 //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
                 codedatagrid.datagrid("endEdit", codeeditRow);
             }
             }, '-',
             { text: '取消编辑', iconCls: 'icon-clear', handler: function () {
                 //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
                 codeeditRow = undefined;
                 codedatagrid.datagrid("rejectChanges");
                 codedatagrid.datagrid("unselectAll");
                }
             }, '-',
             { text: '导入模板', iconCls: 'icon-print', handler: function () {
                 if(selectedid==undefined){
                     return $.messager.alert("提示", "请选择模板", "error");
                 }
                 $('#editWin').window('open');
                }
             }, '-', { text:'<a href="${basepath}/upload/report/report_temp.xls">获取模板</a>'}
         ],onAfterEdit: function (rowIndex, rowData, changes) {
            rowData.fTaskTablebaseid= selectedid;

            var courseTextbook=JSON.stringify(rowData);
            
            if(rowData != null&&!$.isEmptyObject(changes)){
     			$.ajax({
       			 	url: "${path}/cootasktable/tablebasedetail",    //请求的url地址
       			 	dataType: "json",   //返回格式为json
       			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
       			 	data: rowData,//{ "courseTextbook":courseTextbook },    //参数值
       			 	type: "post",   //请求方式
       			 	success: function(req) {
       			 		if(req.status=='1'){
       			 		    codedatagrid.datagrid("reload");
                            layer.msg(req.msg, {time: 3000, icon: 6});
                        }else{
       			 			$.messager.alert("提示", req.msg,"info"); 
       			 		}                			 		
    				},
    				error:function(req) {
    					//console.log(req);
    					$.messager.alert("警告", "修改出错","error"); 
    				}
    			})
            }
        }, onDblClickRow: function (rowIndex, rowData) {
        //双击开启编辑行h
            if (codeeditRow != undefined) {
            	codedatagrid.datagrid("endEdit", codeeditRow);
            	codeeditRow=undefined;
            }
            if (codeeditRow == undefined) {
            	codedatagrid.datagrid("beginEdit", rowIndex);
            	codeeditRow = rowIndex;  

 				 $('#book').form('load',rowData);    				 
 				 $('#editWindow').window('open');
            }
        }
	})

        var codepager = codedatagrid.datagrid('getPager');
        codepager.pagination({
           total:2000,
           pageSize:10,
           pageNumber:1,
           pageList:[10,20,30],
           loading:true,
           showPageList:true,
           showRefresh:true,
           beforePageText:'当前页数',
           afterPageText:' 共{pages}页',
           displayMsg:'共{total}条记录'
       });

        $("#fileupload").uploadify({
            uploader: '${basepath}/assets/uploadify/uploadify.swf',
            script: 'importExcel',
            method:'GET',
            cancelImg:'${basepath}/assets/uploadify/cancel.png',
            //queueID: 'fileQueue',
            //fileExt: '*.xlsx,*.xls',
            buttonText: 'select file',
            //multi: true,
            //simUploadLimit: 999,
            fileExt: '*.xls;*.xlsx;',
            fileDesc : '*.xls;*.xlsx;',
            height: 30,
            width: 120,
            onComplete: function(event, queueID, fileObj, response, data) {
                //转换为json对象
                var dataObj = eval("("+response+")");
                codedatagrid.datagrid("reload");
                $('#editWin').window('close');
                layer.msg(dataObj.msg, {time: 3000, icon: 6});
            },
            //scriptData:{'id':$('#id').val()},
            onError: function(event, queueID, fileObj) {
                $.messager.alert("警告", "文件:" + fileObj.name + "上传失败","error");
            }
        });
    })

    function fileUploasFile(){
        if(selectedid==undefined){
            return layer.msg("请选择模板", {time: 3000, icon: 6});
        }
        //设置 scriptData 的参数
        $('#fileupload').uploadifySettings('scriptData',{'id':selectedid});
        //上传
        jQuery('#fileupload').uploadifyUpload()
    }

    function closeUploadWin(){
        jQuery('#fileupload').uploadifyClearQueue();
        $('#editWin').window('close');
    }

    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'west',split:true"  style="width:30%">
        <table id="baseType" title="模板维护" class="easyui-datagrid"
                singleSelect="true" iconCls="icon-save">
        </table>
    </div>
    <!-- style="width:850px" ;padding:10px-->
    <!--  style="width:850px" -->
    <div data-options="region:'center'" style="width: 70%;" >
        <table id="baseTypeCode" title="模板字段维护" class="easyui-datagrid"
                singleSelect="true" iconCls="icon-save">
        </table>
    </div>

    <div id="editWin" class="easyui-window" title="编辑" style="width:450px;height:300px;padding:10px;"
         data-options="iconCls:'icon-save',modal:true,closed:true">
        <form id="editForm" name="editForm">
            <input type="file" id="fileupload" name="excel" />
            <!--<div id="fileQueue"></div>-->
        </form>
        <div style="text-align: center">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:15%"
               onclick="fileUploasFile()">上传</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" style="width:15%"
               onclick="closeUploadWin()">关闭</a>
        </div>
    </div>
</body>
</html>
